<template>
  <div class="personal-detail">
    <el-row type="flex" justify="space-between" class="tool-box" align="middle">
      <el-col>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/DispatchPersonnel' }"
            >人员管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>人员详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-button size="small" @click="$router.push('/DispatchPersonnel')"
        >返回<i class="el-icon-arrow-right"
      /></el-button>
    </el-row>
    <div class="main">
      <div class="left">
        <el-row type="flex" justify="end">
          <el-button size="mini">编辑<i class="el-icon-arrow-down"/></el-button>
        </el-row>
        <div class="detail">
          <div class="avatar"></div>
          <div class="name">郑念阳</div>
          <el-tag size="mini" class="table-tag">甲班</el-tag>
        </div>
        <el-descriptions
          :column="1"
          :colon="false"
          :labelStyle="{ color: '#909399' }"
        >
          <el-descriptions-item label="车间">一纺</el-descriptions-item>
          <el-descriptions-item label="工序">细砂</el-descriptions-item>
          <el-descriptions-item label="工种">细砂</el-descriptions-item
          ><el-descriptions-item label="班长"
            >谢明 21111719</el-descriptions-item
          ><el-descriptions-item label="班教">细砂</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="right">
        <el-tabs v-model="rightActive">
          <el-tab-pane label="排班表" name="first">
            <schedule />
          </el-tab-pane>
          <el-tab-pane label="排班列表" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="工时统计" name="third">角色管理</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Schedule from './components/schedule.vue';
export default {
  components: { Schedule },
  data() {
    return {
      rightActive: 'first'
    };
  }
};
</script>

<style lang="scss">
.personal-detail {
  height: 100%;
  .tool-box {
    background-color: #f6f9fc;
    padding-bottom: 10px;
    .el-breadcrumb__inner {
      font-size: 15px;
    }
  }
  .main {
    height: calc(100% - 42px);
    display: flex;
    & > div {
      box-sizing: border-box;
      height: 100%;
    }
    .left {
      width: 220px;
      padding: 12px;
      border-right: 10px solid #f6f9fc;
      .el-button {
        color: #83879d;
        border-color: #83879d;
        padding: 5px 8px 5px 8px;
      }
      .detail {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #e5e5e5;
        .avatar {
          width: 40px;
          height: 40px;
          background-color: #2c67f6;
        }
        .name {
          margin: 14px 0 6px;
          font-size: 15px;
          font-weight: 600;
          color: #182236;
          line-height: 21px;
        }
      }
      .el-descriptions {
        padding: 20px 10px 0 30px;
        ::v-deep .el-descriptions-item__label {
          color: rgba(24, 34, 54, 0.6);
        }
      }
    }
    .right {
      text-align: left;
      padding: 12px 0 12px 20px;
      flex-grow: 1;
      .el-tabs {
        height: 100%;
        overflow-y: auto;
        padding-right: 12px;
      }
      .el-tabs__nav-wrap::after {
        display: none;
      }
      // 排班表
      .schedule {
        position: relative;
        .full-calendar-header {
          position: absolute;
          top: 0;
          left: 0;
          .header-center {
            text-align: center;
            .title {
              margin: 0 15px;
              color: #252f41;
              font-size: 14px;
              font-weight: 500;
            }
            .prev-month,
            .next-month,
            .current-month {
              display: inline-block;
              width: 32px;
              height: 32px;
              color: #606d86;
              line-height: 32px;
              font-size: 14px;
              background: #ffffff;
              border-radius: 4px;
              border: 1px solid #cfd4d8;
              cursor: pointer;
            }
            .current-month {
              width: 52px;
              font-size: 12px;
              color: #606d86;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
